Создание фотогалереи как Вконтакте 2014

Урок 0. Введение:
Цикл уроков по созданию фотогалереи как Вконтакте посвящен созданию собственной фотогалереи с абсолютного нуля, функционал которой похож на фотогалерею социальной сети Вконтакте. При этом при создании данного скрипта мы будем использовать язык PHP, систему управления базой данных Mysql и язык JavaScript в связке с библиотекой JQuery.
Курс Фотогалерея как Вконтакте будет построен следующим образом: в начале мы определимся с необходимыми таблицами базы данных, а также создадим файловую структуру. Далее отобразим изображения галереи вместе с комментариями на странице сайта, затем займемся выравниванием изображений и выводом их в виде рядов с одинаковыми отступами между ними. Создадим страницу просмотра отдельного изображения и его комментариев, и наконец, реализуем механизм добавления новых комментариев к отдельным изображениям и для всей галереи в целом.
Таким образом, изучив курс по созданию фотогалереи как Вконтакте Вы увидите, как практически создать отдельный полноценный скрипт, который встраивается в работу основного сайта, научитесь работать с шаблонами и все что касается дизайна и отображения на экран, выделять в отдельные шаблоны. Также закрепите свои навыки в работе с языком JavaScript, и библиотекой jQuery, которые необходимы для расчета высоты рядов с изображениями и методом AJAX, при помощи которого будут отправляться новые комментарии галереи.
Ищите ответ на вопрос "Как сделать фотогалерею"? Мы научим вас создавать фотогалереи любой сложности, например как Вконтакте!


Урок 1. Структура скрипта
От автора: с этого урока мы начинаем небольшой цикл уроков по созданию собственной фотогалереи, функционал которой, похож на фотогалерею социальной сети ВКонтакте. В данном уроке мы определимся с необходимыми таблицами базы данных, а также создадим файловую структуру будущего скрипта.


Урок 2. Отображение изображений галереи:
От автора: продолжаем цикл уроков по созданию собственной фотогалереи как ВКонтакте. После того, как определена структура будущего скрипта, необходимо отобразить галерею вместе с комментариями на странице сайта.


Урок 3. Выравнивание изображений:
От автора: продолжаем цикл уроков по созданию собственной фотогалереи как ВКонтакте. Сегодня мы займемся внешним видом галереи, а именно выравниванием изображений и выводом их в виде рядов с одинаковыми отступами между ними.


Урок 4. Отступы между изображениями:
От автора: продолжаем работать над скриптом фотогалереи как «ВКонтакте». На данном этапе кодирования – мы вывели изображения галереи на экран, но так как нет отступов между изображениями общий вид галереи не совсем красивый. Поэтому в данном уроке мы с Вами займемся решением данной проблемы.


Урок 5. Страница детального просмотра изображений:
От автора: продолжаем работать над скриптом фотогалереи как «ВКонтакте». В данном уроке мы начнем создавать страницу детального просмотра изображений галереи, но по сути это будет не страница, а обычный блок div, в котором будет отображаться изображение большого размера, комментарии и некоторые элементы управления.


Урок 6. Навигация по изображениям галереи:
От автора: продолжаем работать над скриптом фотогалереи как «ВКонтакте» На данном этапе у нас выводится блок просмотра увеличенной копии изображения, который отображается при клике по миниатюрам изображений галереи. В данном уроке мы с Вами разобьем общий шаблон галереи на несколько отдельных, каждая часть которого будет выводить отдельный элемент галереи. А также реализуем навигацию по изображениям галереи, в блоке просмотра увеличенной копии изображения.


Урок 7. Ответы на комментарии:
От автора: продолжаем работать над скриптом фотогалереи как «ВКонтакте» В данном видео мы с Вами реализуем логику закрытия блока просмотра увеличенного изображения, а также начнем работать над комментариями. Логика добавления новых комментов несложная, но код достаточно объемен, поэтому реализацию данного механизма мы разобьем на несколько уроков.


Урок 8. Добавление комментариев:
От автора: продолжаем дорабатывать фотогалерею для сайта, как в социальной сети ВКонтакте. На данный момент функционал галереи полностью завершен за исключением добавления комментариев, поэтому в данном уроке мы это исправим и реализуем механизм добавления комментариев в базу данных.


Урок 9. Постраничная навигация комментариев:
От автора: продолжаем дорабатывать фотогалерею для сайта, как в социальной сети ВКонтакте. На данном этапе комментарии пользователей успешно добавляются в базу данных. Но что будет, если комментариев к одному из элементов галереи добавить слишком много? При этом, пользователь зайдя на данную страницу, увидит огромный список комментариев, которые, возможно, его и не интересуют. Поэтому в данном уроке мы разобьем вывод комментариев на две виртуальные страницы. Первая — будет отображать фиксированное количество комментариев – вторая все комментарии, интересующего элемента галереи.